<!-- 精彩历程 -->
<template>
  	<div class="main pb24 pr24 main-course">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32 align-row-center pointer" @click="$router.back(-1)">
                    <i class="icon ic_back mr8"></i>
                    <span>返回</span>
                </div>
				<div class="fc-black">{{ projectName }}>精彩历程</div>
			</div>
		</div>
		<div class="content">
            <div class="list_course pl32 pr32">
                <div class="course">
                    <div class="ladder">
                        <i class="icon ic_person" ></i>
                    </div>
                    <div class="scrollbar-y  pb40">
                        <div class="course-dashed">
                            <div class="time-dashed">
                                <div class="left_time fc-gray ft14 mr32 lh40">{{!!dataInfo.projectStartTime ? new Date(dataInfo.projectStartTime).Format('yyyy-MM-dd') : ' '}}</div>
                                <div class="right_content ml32">项目开始</div>
                                <div class="dashed time-dashed-top" :class="dataInfo.projectStartTime < new Date().getTime() ? 'select' : ''"></div>
                                <div class="dashed_dian t55" :class="dataInfo.projectStartTime < new Date().getTime() ? 'select' : ''"></div>
                            </div>
                            <div class="time-dashed" v-for="(item,index) in dataInfo.list"  :key="index">
                                <div class="left_time fc-gray ft14 mr32 lh40">{{new Date(item.startTime).Format('yyyy-MM-dd')}}</div>
                                <div class="right_content ml32">
                                    <span class="course-name">{{item.name}}</span>
                                    <div class="course-tree">
                                        <el-tree
                                            :data="item.level2"
                                            :props="defaultProps"
                                            :empty-text="' '"
                                            accordion
                                            @node-click="handleNodeClick">
                                        </el-tree>
                                    </div>
                                </div>
                                <div class="dashed" :class="[item.complete == true ? 'select' : '']"></div>
                                <div class="dashed_dian t55" :class="item.complete == true ? 'select' : ''"></div>
                            </div>
                            <div class="time-dashed list-tail">
                                <div class="left_time fc-gray ft14 mr32 lh40">{{ !!dataInfo.projectEndTime ? new Date(dataInfo.projectEndTime).Format('yyyy-MM-dd')  : ' '}}</div>
                                <div class="right_content ml32">项目完结</div>
                                <div class="dashed" :class="dataInfo.complete == true ? 'select' : ''"></div>
                                <div class="dashed time-dashed-bottom" :class="dataInfo.complete == true ? 'select' : ''"></div>
                                <div class="dashed_dian b17" :class="dataInfo.complete == true ? 'select' : ''"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="table_title" v-for="(item,index) in dataList" :key="index">
                    <div class="table-td ">
                        <div class="pr16">
                            <img :src="serverIp.setImgUrl(item.headImage)"/>
                        </div>
                        <span v-text="item.userName"></span>
                    </div>
                    <div class="table-td" v-text="item.departmentName"></div>
                    <div class="table-td" v-text="item.position"></div>
                    <div class="table-td" v-text="item.phone"></div>
                </div> -->
            </div>
		</div>
  	</div>

</template>

<script>
export default {
    components: {
    },
	data () {
		return {
            projectId:'',
            projectName:'',
            dataInfo:[],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
		};
	},
	computed: {},
	created(){
        this.projectId = this.$route.query.projectId;
        this.projectName = this.$route.query.projectName;
    },
	mounted(){
        this.getList();
    },
	methods: {
        //获取成员列表
        getList(){
            this.$http.get('/project/project/wonderful/history', {
                params: {
                    projectId: this.projectId,
                }
            }).then( res =>{
                if(res.statusCode == 200){
                    console.log(res,"--");
                    this.dataInfo  = res.data || {};
                    this.dataInfo.list.forEach((item,index) =>{
                        console.log(item,"item");
                        let level2 = JSON.parse(JSON.stringify(item.level2));
                        // item.level2 = [];
                        if(item.level2 != null && item.level2.length > 0){
                            item.level2 = [];
                            item.level2.push({
                                name:' ',
                                children:level2
                            })
                        }
                        // if(index == 2){
                        //     item.level2.push({
                        //         label: '一级 1',
                        //         children: [{
                        //             label: '二级 1-1',
                        //             children: [{
                        //             label: '三级 1-1-1'
                        //             }]
                        //         }]
                        //     })
                        // }

                    });
                    // for(var i = 0; i < 10; i++){
                    //     this.dataInfo.list.push({
                    //         complete: false,
                    //         endTime: 1573546142000,
                    //         level2:[],
                    //         name: '测试' + i,
                    //         startTime: 1568275742000,
                    //     })
                    // }
                    console.log(this.dataInfo,"---")
                }else{
                    this.dataInfo = {};
                }
            }).catch(error => {
                console.log(error);
            });
        },
        handleNodeClick(data) {
            console.log(data);
        }
    }
}

</script>
<style lang='scss' scoped>
	.main{
        min-width:510px;
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
		>.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
		}

		>.content{
            border-radius: 6px ;
            background-color:#FFF;
            height:calc(100% - 80px);
			display:flex;
            flex-wrap:wrap;
            >.list_course{
                width:100%;
                height:100%;
                .course{
                    width:100%;
                    height:100%;
                    display:flex;
                    justify-content:center;
                    .ladder{
                        position:relative;
                        width:44px;
                        background-image:url("~@/assets/img/project/course/ic_ladder.png");
                        background-size:cover;
                        background-repeat:no-repeat;
                        margin-right:56px;
                        .ic_person{
                            position:absolute;
                            left:0;
                            bottom:152px;
                            // bottom:0px;
                            width: 53px;
                            height: 111px;
                            transition:bottom 2s;
                            background-image: url("~@/assets/img/project/course/ic_person.png");
                        }
                    }
                    .scrollbar-y{
                        min-width: 400px;
                        height:100%;
                        overflow-y:auto;
                        &::-webkit-scrollbar {
                            display: none
                        }
                        -ms-overflow-style: none; /* IE 10+ */
                        scrollbar-width: none; /* Firefox */
                    }
                    .course-dashed{
                        // width:100%;
                        display:flex;
                        flex-direction:column;
                        flex-wrap:wrap;
                        height:auto;
                        .time-dashed{
                            display:flex;
                            align-items:flex-start ;
                            min-height:80px;
                            position:relative;

                            .left_time{
                                width:100px;
                                margin-top:40px;
                            }
                            .dashed{
                                position:absolute;
                                left:86px;
                                bottom:17px;
                                width: 1px;
                                height: 100%;
                                border-left: dashed 2px #ebedef;
                                z-index:888;
                                &.time-dashed-top{
                                    min-height:24px;
                                    height:24px;
                                }
                                &.time-dashed-bottom{
                                    min-height:24px;
                                    height:24px;
                                    bottom:-7px;
                                }
                                &.select{
                                    border-left: solid 2px #ff8f2b;
                                }
                            }
                            .dashed_dian{
                                position:absolute;
                                left:82px;
                                width:10px;
                                height:10px;
                                border-radius: 50%;
                                z-index:999;
                                border:2px solid #ebedef;
                                background-color:#FFF;
                                &.select{
                                    border:2px solid #ff8f2b;
                                }
                                &.t55{
                                    top:55px;
                                }
                            }
                            // .dashed:before{
                            //     position:absolute;
                            //     width:10px;
                            //     height:10px;
                            //     z-index:999;
                            //     border:1px solid red;
                            // }
                            .right_content {
                                min-width:200px;
                                margin-top:40px;
                                background-color: #f2f6f9;
	                            border-radius: 6px;
                                padding:13px 12px;
                                font-size:14px;
                                color: #323234;
                                display:flex;
                                .course-name{
                                    width:100px;
                                }
                                .course-tree{
                                    width: calc(100% - 100px);
                                }
                            }
                            &.list-tail{
                                flex:1;
                                align-items:flex-end;
                                .dashed_dian{
                                    // top:55px;
                                }
                            }
                        }
                    }
                }
            }
        }
	}
</style>
<style lang="scss">
    .main-course{
        .el-tree{
            margin-top:-4px;
            background:none !important;
            .el-tree__empty-block{
                min-height:20px;
            }
        }
    }
</style>
